require('./PageTenderachievement.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Group, TextField, SelectField, DatetimeField, Button, Boxs, Toast } = SaltUI;
const Upload = require('images/svg/upload.svg');
const { HBox, Box } = Boxs;
import Addpersonfield from 'components/addpersonfield'
const Getfilepathlist = require('components/getfilepathlist')
const File = require('images/svg/file.svg');

const nodeList = {
    tenderplan: [
        { value: 0, text: '项目申报' },
        { value: 1, text: '建设方案' },
        { value: 2, text: '预算确认' },
        { value: 3, text: '采购' },
        { value: 4, text: '评标' }]
}
class Tenderachievement extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            upfileName: [],//文件上传
            approvers: [],//审批人姓名列表
            nodeList: [],//项目所属节点列表
            proNumAll: [],//所有的项目编号
            proNameAll: [],//所有的项目名称
            options: [{ value: 0, text: '是' },
            { value: 1, text: '否' }],//是否初次提交
            achieveName: '',
            finishTime: '',
            initSubmit: '',
            proName: '',
            proTime: '',
            node: '',
            approvers: '',
            active: false,
            pathdata: [],//路径数据
        };
        this.data = [
            { label: "成果名称", name: "achieveName" },
            { label: "成果完成时间", name: "finishTime" },
            { label: "所属招标节点", name: "node" },
            { label: "是否初次提交", name: "initSubmit" },
        ]
        if (props.pagedata) {
            let nodelists = props.pagedata.node_info;
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].name) {
                    if (i == 1) {
                        this.state[this.data[i].name] = new Date(nodelists[i].value).getTime()
                    } else if (i == 3) {
                        this.state[this.data[i].name] = { value: nodelists[i].value == "是" ? 0 : 1, text: nodelists[i].value }//是否初次提交
                    } else if (i == 2) {
                        let n = 0;
                        for (let key in nodeList.tender) {
                            if (nodeList.tender[key].text == nodelists[i].value) {
                                n = key;
                            }
                        }
                        this.state[this.data[i].name] = nodeList.tender[n]
                    } else {
                        this.state[this.data[i].name] = nodelists[i].value;
                    }
                }
            }
            this.state.proName = props.pagedata.proName
            this.state.proNum = props.pagedata.proNum
            this.state.edit = props.edit;
        }
        this.handleClickUp = this.handleClickUp.bind(this);
        this.handleCancleCb = this.handleCancleCb.bind(this);
        this.handleClickStep = this.handleClickStep.bind(this);
        this.handleClickPass = this.handleClickPass.bind(this);
    }
    handleTextChange(name, newValue) {
        if (name == "proName") {
            let obj = this.state.proNameAll[newValue.value];
            this.setState({ proNum: this.state.proNumAll[newValue.value], nodeList: nodeList[obj.proj_category] }, () => {
                this.process_id = this.state.proNameAll[newValue.value]["process_id"];
                this.proj_webhook = this.state.proNameAll[newValue.value]["proj_webhook"];
                this.folder_id = this.state.proNameAll[newValue.value]["folder_id"];
                this.path_name = "公共区"
            })
        }
        this.setState({
            [name]: newValue
        });
    }

    handleTimeChange(name, newValue) {
        this.setState({
            [name]: newValue,
            [name + '1']: new Date(newValue).toLocaleDateString(),
        });
    }
    //提交按钮
    handleClick() {
        if (!this.state.achieveName) {
            Toast.show({
                type: 'error',
                content: `成果名称不能为空`
            });
            return;
        } else if (!this.state.finishTime) {
            Toast.show({
                type: 'error',
                content: `成果完成时间不能为空`
            });
            return;
        } else if (!this.state.initSubmit) {
            Toast.show({
                type: 'error',
                content: `是否初次提交不能为空`
            });
            return;
        } else if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: `所属项目名称不能为空`
            });
            return;
        } else if (!this.state.node) {
            Toast.show({
                type: 'error',
                content: `所属节点不能为空`
            });
            return;
        } else if (!this.state['approvers']) {
            Toast.show({
                type: 'error',
                content: `审批人不能为空`
            });
            return;
        }
        if (this.props.pagedata) {
            Actions.submit({ node: this.data, data: this.state, process_id: this.process_id, proj_webhook: this.proj_webhook, edit: this.state.edit, pagedata: this.props.pagedata });
        } else {
            Actions.submit({ node: this.data, data: this.state, process_id: this.process_id, proj_webhook: this.proj_webhook });
        }

    }
    upFile() {
        if (this.state.proName && this.state.version) {
            var formData = null
            formData = new FormData(this.refs.fileForm);
            if (this.state.upfileName.length == 1) {
                Toast.show({
                    type: 'error',
                    content: "只能传一个文件",
                });
                return;
            }
            Actions.upFiles({ name: this.state.proName.text, version: this.state.version }, formData, this.refs.processShow);
        } else if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "请先选择所属项目名称",
            });
        } else if (!this.state.version) {
            Toast.show({
                type: 'error',
                content: "请先输入附件版本",
            });
        }
    }
    deleteFile(e) {
        var fileid = $(e.target)[0].title
        Actions.delFiles(fileid)
    }
    handleAddpersonCb(names) {
        this.setState({ approvers: names })
    }
    handleAddpersonUnionid(unionids) {
        this.setState({
            approvers_id: unionids
        })
    }
    //点击图标
    handleClickUp() {
        if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "请先选择所属项目名称",
            });
            return;
        }
        this.setState({ active: true }, () => {
            this.home = true;
            Actions.fetchFilePaths({ folder_id: this.folder_id });
        });
    }
    //选择目录取消功能-返回内容页
    handleCancleCb(folder_id) {
        this.folder_id = folder_id;
        this.setState({ active: false }, () => {
            Actions.fetchFilePaths({ folder_id: this.folder_id });
        });
    }
    //选择目录前进-点击文件夹
    handleClickStep(folder_id, path_name) {
        if (folder_id) {
            this.folder_id = folder_id;
            this.path_name = path_name;
            this.home = false;
            Actions.fetchFilePaths({ folder_id })
        }

    }
    handleClickPass(params) {
        this.setState({ pathname: params.title }, () => {
            this.pass_folder_id = params.folder_id;
        });
    }
    render() {
        let t = this
        return (
            <div className="tenderachievement myform">
                <Group.List >
                    <TextField
                        label="成果名称"
                        placeholder="请输入成果名称"
                        value={t.state.achieveName}
                        onChange={t.handleTextChange.bind(t, 'achieveName')}
                        readOnly={t.props.edit}
                    />
                </Group.List>
                <Group.List >
                    <DatetimeField
                        label="成果完成时间"
                        placeholder="请选择"
                        columns={['年', '月', '日']}
                        className="time"
                        value={this.state.finishTime}
                        onSelect={this.handleTimeChange.bind(t, 'finishTime')}
                        readOnly={t.props.edit}
                    />
                </Group.List>
                <Group.List >
                    <SelectField
                        label="是否初次提交"
                        placeholder="请选择"
                        value={t.state.initSubmit}
                        options={t.state.options}
                        onSelect={t.handleTextChange.bind(t, 'initSubmit')}
                        readOnly={t.props.edit}
                    />
                </Group.List>
                <Group.List >
                    <SelectField
                        label="所属项目名称"
                        placeholder="请选择"
                        options={t.state.proNameAll}
                        value={t.state.proName}
                        onSelect={t.handleTextChange.bind(t, 'proName')}
                        readOnly={t.props.edit}
                    />
                    <TextField
                        label="所属项目编号"
                        value={t.state.proNum}
                        onChange={t.handleTextChange.bind(t, 'proNum')}
                        readOnly={true}
                    />
                </Group.List>
                <Group.List >
                    <SelectField
                        label="所属招标节点"
                        placeholder="请选择"
                        options={this.state.nodeList}
                        value={t.state.node}
                        onSelect={t.handleTextChange.bind(t, 'node')}
                        readOnly={t.props.edit}
                    />
                </Group.List>
                <div className="processShow" ref="processShow"> </div>
                <Group.List>
                    <TextField
                        label="附件版本号"
                        placeholder="请输入成果附件版本号"
                        value={t.state.version}
                        onChange={t.handleTextChange.bind(t, 'version')}
                        readOnly={t.props.edit}
                    />
                </Group.List>
                <Group.List>
                    <HBox>
                        <Box flex={3}>
                            <TextField
                                label="文件存储区域"
                                value={t.state.pathname}
                                readOnly={t.props.edit}
                            />
                        </Box>
                        <Box flex={1} onClick={this.handleClickUp}>
                            <Upload height="24" width="20" className="file-Form-Icon" />
                        </Box>
                    </HBox>
                </Group.List>
                <Group.List>
                    <HBox>
                        <Box flex={0.5}>
                            <TextField
                                label="上传附件"
                                readOnly={true}
                            />
                        </Box>
                        <Box flex={1}>
                            <form className="file-Form" ref="fileForm">
                                <input type="file" value="" name="file" className="file-Input" onChange={this.upFile.bind(t)} />
                            </form>
                            <File height="20" width="18" className="file-Form-Icon" />
                        </Box>
                    </HBox>
                </Group.List>
                <div style={{ textAlign: "center", marginBottom: '10px' }}>
                    {this.state.upfileName.map((item) => {
                        return (<a className="fileshow" title={item.fileId} onClick={this.deleteFile.bind(t)} >{item.fileName}</a>)
                    })}
                </div>
                <Group.List>
                    <Addpersonfield
                        label="审批人"
                        cb={t.handleAddpersonCb.bind(t)}
                        union={t.handleAddpersonUnionid.bind(t)}
                        approvers={t.state.approvers}
                        approvers_id={t.state.approvers_id}
                        maxLength="10"
                    />
                </Group.List>
                <Button type="primary" className="submitBtn" onClick={t.handleClick.bind(t)}>提交</Button>
                <Getfilepathlist
                    active={this.state.active}
                    data={this.state.pathdata}
                    handleCancleCb={this.handleCancleCb}
                    step={this.handleClickStep}
                    folder_id={this.folder_id}
                    path_name={this.path_name}
                    pass={this.handleClickPass}
                    home={this.home}
                />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.pagedata.approvers && nextProps.pagedata.approvers instanceof Array)
            this.setState({
                approvers: nextProps.pagedata.approvers,
                approvers_id: nextProps.pagedata.approvers_id,
            });
        else if (nextProps.pagedata.approvers && typeof nextProps.pagedata.approvers == 'string')
            this.setState({
                approvers: [nextProps.pagedata.approvers],
                approvers_id: [nextProps.pagedata.approvers_id]
            });
        if (nextProps.pagedata.cc_list && nextProps.pagedata.cc_list instanceof Array)
            this.setState({
                cc_list: nextProps.pagedata.cc_list,
                cc_list_id: nextProps.pagedata.cc_list_id
            });
        else if (nextProps.pagedata.cc_list && typeof nextProps.pagedata.cc_list == 'string')
            this.setState({
                cc_list: [nextProps.pagedata.cc_list],
                cc_list_id: [nextProps.pagedata.cc_list_id]
            })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Tenderachievement, Reflux.connect(Store));

module.exports = Tenderachievement;
